Huljo /
MowItNow
| Conditions | 11 |
| Paths | 52 |
| Total Lines | 111 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 1 | ||
| Bugs | 0 | Features | 0 |
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
Complex classes like anchor.js ➔ ... ➔ this.add often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.
Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.
| 1 | /*! |
||
| 21 | this.add = function(selector) { |
||
| 22 | var elements, |
||
| 23 | elsWithIds, |
||
| 24 | idList, |
||
| 25 | elementID, |
||
| 26 | i, |
||
| 27 | roughText, |
||
| 28 | tidyText, |
||
| 29 | index, |
||
| 30 | count, |
||
| 31 | newTidyText, |
||
| 32 | readableID, |
||
| 33 | anchor; |
||
| 34 | |||
| 35 | this._applyRemainingDefaultOptions(this.options); |
||
| 36 | |||
| 37 | // Provide a sensible default selector, if none is given. |
||
| 38 | if (!selector) { |
||
| 39 | selector = 'h1, h2, h3, h4, h5, h6'; |
||
| 40 | } else if (typeof selector !== 'string') { |
||
| 41 | throw new Error('The selector provided to AnchorJS was invalid.'); |
||
| 42 | } |
||
| 43 | |||
| 44 | elements = document.querySelectorAll(selector); |
||
| 45 | if (elements.length === 0) { |
||
| 46 | return false; |
||
| 47 | } |
||
| 48 | |||
| 49 | this._addBaselineStyles(); |
||
| 50 | |||
| 51 | // We produce a list of existing IDs so we don't generate a duplicate. |
||
| 52 | elsWithIds = document.querySelectorAll('[id]'); |
||
| 53 | idList = [].map.call(elsWithIds, function assign(el) { |
||
| 54 | return el.id; |
||
| 55 | }); |
||
| 56 | |||
| 57 | for (i = 0; i < elements.length; i++) { |
||
| 58 | |||
| 59 | if (elements[i].hasAttribute('id')) { |
||
| 60 | elementID = elements[i].getAttribute('id'); |
||
| 61 | } else { |
||
| 62 | roughText = elements[i].textContent; |
||
| 63 | |||
| 64 | // Refine it so it makes a good ID. Strip out non-safe characters, replace |
||
| 65 | // spaces with hyphens, truncate to 32 characters, and make toLowerCase. |
||
| 66 | // |
||
| 67 | // Example string: // '⚡⚡⚡ Unicode icons are cool--but they definitely don't belong in a URL fragment.' |
||
| 68 | tidyText = roughText.replace(/[^\w\s-]/gi, '') // ' Unicode icons are cool--but they definitely dont belong in a URL fragment' |
||
| 69 | .replace(/\s+/g, '-') // '-Unicode-icons-are-cool--but-they-definitely-dont-belong-in-a-URL-fragment' |
||
| 70 | .replace(/-{2,}/g, '-') // '-Unicode-icons-are-cool-but-they-definitely-dont-belong-in-a-URL-fragment' |
||
| 71 | .substring(0, 64) // '-Unicode-icons-are-cool-but-they-definitely-dont-belong-in-a-URL' |
||
| 72 | .replace(/^-+|-+$/gm, '') // 'Unicode-icons-are-cool-but-they-definitely-dont-belong-in-a-URL' |
||
| 73 | .toLowerCase(); // 'unicode-icons-are-cool-but-they-definitely-dont-belong-in-a-url' |
||
| 74 | |||
| 75 | // Compare our generated ID to existing IDs (and increment it if needed) |
||
| 76 | // before we add it to the page. |
||
| 77 | newTidyText = tidyText; |
||
| 78 | count = 0; |
||
| 79 | do { |
||
| 80 | if (index !== undefined) { |
||
| 81 | newTidyText = tidyText + '-' + count; |
||
| 82 | } |
||
| 83 | // .indexOf is supported in IE9+. |
||
| 84 | index = idList.indexOf(newTidyText); |
||
| 85 | count += 1; |
||
| 86 | } while (index !== -1); |
||
| 87 | index = undefined; |
||
| 88 | idList.push(newTidyText); |
||
| 89 | |||
| 90 | // Assign it to our element. |
||
| 91 | // Currently the setAttribute element is only supported in IE9 and above. |
||
| 92 | elements[i].setAttribute('id', newTidyText); |
||
| 93 | |||
| 94 | elementID = newTidyText; |
||
| 95 | } |
||
| 96 | |||
| 97 | readableID = elementID.replace(/-/g, ' '); |
||
| 98 | |||
| 99 | // The following code builds the following DOM structure in a more effiecient (albeit opaque) way. |
||
| 100 | // '<a class="anchorjs-link ' + this.options.class + '" href="#' + elementID + '" aria-label="Anchor link for: ' + readableID + '" data-anchorjs-icon="' + this.options.icon + '"></a>'; |
||
| 101 | anchor = document.createElement('a'); |
||
| 102 | anchor.className = 'anchorjs-link ' + this.options.class; |
||
| 103 | anchor.href = '#' + elementID; |
||
| 104 | anchor.setAttribute('aria-label', 'Anchor link for: ' + readableID); |
||
| 105 | anchor.setAttribute('data-anchorjs-icon', this.options.icon); |
||
| 106 | |||
| 107 | if (this.options.visible === 'always') { |
||
| 108 | anchor.style.opacity = '1'; |
||
| 109 | } |
||
| 110 | |||
| 111 | if (this.options.icon === '\ue9cb') { |
||
| 112 | anchor.style.fontFamily = 'anchorjs-icons'; |
||
| 113 | anchor.style.fontStyle = 'normal'; |
||
| 114 | anchor.style.fontVariant = 'normal'; |
||
| 115 | anchor.style.fontWeight = 'normal'; |
||
| 116 | anchor.style.lineHeight = 1; |
||
| 117 | } |
||
| 118 | |||
| 119 | if (this.options.placement === 'left') { |
||
| 120 | anchor.style.position = 'absolute'; |
||
| 121 | anchor.style.marginLeft = '-1em'; |
||
| 122 | anchor.style.paddingRight = '0.5em'; |
||
| 123 | elements[i].insertBefore(anchor, elements[i].firstChild); |
||
| 124 | } else { // if the option provided is `right` (or anything else). |
||
| 125 | anchor.style.paddingLeft = '0.375em'; |
||
| 126 | elements[i].appendChild(anchor); |
||
| 127 | } |
||
| 128 | } |
||
| 129 | |||
| 130 | return this; |
||
| 131 | }; |
||
| 132 | |||
| 198 |
